let mask = document.querySelector(".mask");
let smallBox = document.querySelector(".smallBox");
let smallBoo=smallBox.querySelector("img")
let box = document.querySelector(".box");
let bigBox = document.querySelector(".bigBox");
let bigBoxImg = bigBox.querySelector("img");

// 鼠标移动
smallBox.addEventListener("mousemove", function (e) {
  // pageX、clientX
  // 当前页面坐标pageX - 盒子box左偏移值 - 遮罩层的一半
  let moveX = e.pageX - box.offsetLeft - mask.offsetWidth / 2;
  let moveY = e.pageY - box.offsetTop - mask.offsetHeight / 2;

  let maxX = smallBox.offsetWidth - mask.offsetWidth;
  let maxY = smallBox.offsetHeight - mask.offsetHeight;

  // 左边的最大移动距离
  moveX <= 0 && (moveX = 0);

  // 上边的最大移动距离
  moveY <= 0 && (moveY = 0);

  // 右边的最大移动距离
  moveX >= maxX && (moveX = maxX);

  // 下边的最大移动距离
  moveY >= maxY && (moveY = maxY);

  // 遮罩层移动
  mask.style.transform = `translate(${moveX}px, ${moveY}px)`;

  // 求大图的移动比例和遮罩层的移动比例
  // mask横向移动最大距离 / mask的移动距离
  // =
  // 大图横向移动最大距离 / 需要求的值(大图的移动距离)

  // 需要求的值(大图的移动距离) = mask的移动距离 * 大图横向移动最大距离 / mask横向移动最大距离

  let bigImgX = (moveX * (bigBoxImg.offsetWidth - bigBox.offsetWidth)) / maxX;
  let bigImgY = (moveY * (bigBoxImg.offsetHeight - bigBox.offsetHeight)) / maxY;

  // 大图移动
  bigBoxImg.style.transform = `translate(${-bigImgX}px, ${-bigImgY}px)`;
});
let _box = document.querySelector(".box2");
_box.addEventListener("click", function (e) {
  e.target.addEventListener("mousemove", function () {
    smallBoo.src = this.src;
    bigBoxImg.src = this.src;
    //是把之前框框里图片的地址换成鼠标拖动显示的图片的地址 
  });
});
